<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>anki-md模板测试</title>
  </head>
  <style>
    /* 这个需要复制到anki的css样式的那个窗口里 */
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
    }

    @media (max-width: 767px) {
      .markdown-body {
        padding: 15px;
      }
    }
  </style>
  <body>
    <br />\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]<br />
    <div id="test" class="md-content">
      When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they
      are 只有这个是正常的 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </div>
    <div class="md-content">
      * 呵呵 
      # 我看你真是老糊涂了
    </div>
    <script>
      'use strict'
      // 在anki中查看调试信息
      function consoleLog(str) {
        var div = document.createElement('div')
        div.innerHTML = str
        document.body.appendChild(div)
      }

      var JQ_CDN =
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
      var SHOWDOWN_CDN =
        'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/showdown/2.0.0/showdown.min.js'
      var HIGHLIGHT_JS_CDN =
        'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js'
      var es6CDN = 'https://polyfill.io/v3/polyfill.min.js?features=es6'
      var MATHJAX_CDN =
        'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-chtml-full.js'
      var HIGHLIGHT_CSS_CDN =
        'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/base16/onedark.min.css'
      var GITHUB_MARKDOWN_CSS_CDN =
        'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/github-markdown-css/5.1.0/github-markdown.css'

      // 加载库文件
      var createScript = (src) => {
        var scriptElement = document.createElement('script')
        scriptElement.src = src
        scriptElement.async = true
        scriptElement.type = 'text/javascript'
        document.head.appendChild(scriptElement)
        return new Promise((resolve) => {
          scriptElement.onload = function () {
            resolve(src)
          }
        })
      }

      // 加载css文件
      var createLink = (url) => {
        var linkElement = document.createElement('link')
        linkElement.rel = 'stylesheet'
        linkElement.href = url
        linkElement.onload = () => {}
        document.head.appendChild(linkElement)
      }

      // 清除br标签
      // anki自动生成的<br>全部干掉 严格按照原生换行来写
      var clearBR = (str) => {
        str = str.replace(/<br>/g, '\r\n')
        return str
      }

      var clearBlankNbsp = (str) => {
        str = str.replace(/&nbsp;/g, ' ')
        return str
      }
      // 解析（入口方法）
      var parseMarkDown = () => {
        var convert = new showdown.Converter({
          // 启用对md中对图像尺寸的支持
          // ![foo](foo.jpg =100x80)     simple, assumes units are in px
          // ![bar](bar.jpg =100x*)      sets the height to "auto"
          // ![baz](baz.jpg =80%x5em)  Image with width of 80% and height of 5em
          parseImgDimensions: true,
          // 启用对删除线的支持
          strikethrough: true,
          // 启用对表格语法的支持
          tables: true,
          // 启用checkbox的支持
          tasklists: true,
          // 尝试巧妙地修复与缩进代码中间与 es6 模板字符串相关的缩进问题
          smartIndentationFix: true,
          // 将换行符解析为 <br>，行尾不需要2个空格
          simpleLineBreaks: true,
          // 反斜杠转义html
          backslashEscapesHTMLTags: true,
          // 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
          // disableforced4spacesindentedsublist: true,
          ghCodeBlocks: true,
        })
        // 好像是失效的？？不管用呢
        // convert.setFlavor('github')
        document.querySelectorAll('.md-content').forEach((div, index) => {
          console.log('查找到的容器元素', div)
          div.innerHTML = clearBlankNbsp(div.innerHTML)
          var text = div.innerHTML
          console.log('text', text)
          var thisConverterSpecificOptions = convert.getOptions()
          console.log('当前的配置项', thisConverterSpecificOptions)
          // 清除br标签
          text = clearBR(text)
          // 👇关键核心md转换
          var html = convert.makeHtml(text)
          var newDiv = document.createElement('div')
          var hr = document.createElement('hr')
          newDiv.innerHTML = html
          // 激活github-markdown-css
          newDiv.className = 'markdown-body'
          div.parentNode.insertBefore(newDiv, div.nextSibling)

          index === 1
            ? div.parentNode.insertBefore(hr, div.nextSibling)
            : null
          div.className = `x-${index}`
          div.style.display = 'none'
          // 不能从body直接插入元素 anki 不刷新的 淦
        })
      }
      createLink(GITHUB_MARKDOWN_CSS_CDN)
      createLink(HIGHLIGHT_CSS_CDN)

      function texToHtml(texString) {
        // 使用MathJax的tex2chtml函数将TeX字符串转换为HTML节点
        const node = MathJax.tex2chtml(texString)
        // 返回HTML字符串
        return node.outerHTML
      }
      createScript(SHOWDOWN_CDN)
        .then(() => {
          return createScript(HIGHLIGHT_JS_CDN)
        })
        .then(() => {
          // anki模板无法使用window.onload我怀疑是被占用了
          // window.onload = parseMarkDown
          // 可以尝试手动清除anki生成的<br>
          parseMarkDown()
        })
        .then(() => {
          // 自动代码高亮
          hljs.highlightAll()
        })
        .then(() => {
          // 清除重复项 试试
          var repeatEl = document.querySelectorAll('.x-0')
          repeatEl.forEach((el, i) => {
            if (i === repeatEl.length - 1) {
              return
            }
            document.body.removeChild(el)
          })
        })
    </script>
  </body>
</html>
